<script setup lang="ts">
import { icons as TablerIcons } from '@iconify-json/tabler'
import { icons as SimpleIcons } from '@iconify-json/simple-icons'
import { icons as LogosIcons } from '@iconify-json/logos'

const {
  labelWidth = '80px',
  labelOnTopWidth = 375,
  rules = {},
  model = {} as BaseModelType,
  formItemShow = undefined,
  confTypeOptions = [],
  currentIsDirForm = () => false,
  getDirTree = () => []
} = defineProps<{
  labelWidth?: FormColsResponsivePropsType['labelWidth']
  labelOnTopWidth?: FormColsResponsivePropsType['labelOnTopWidth']
  rules?: BaseModelFormRulesType
  model: BaseModelType
  formItemShow?: BaseModelFormItemShowType
  confTypeOptions?: SegmentedOptionsType
  currentIsDirForm?: (type: string) => boolean
  getDirTree?: () => BaseModelTreeType
}>()

const formRef = ref()
const formItemParentRef = ref()
const isValidatePass = async () => {
  try {
    await formRef.value.elFormRef.validate()
    return true
  } catch {
    return false
  }
}
defineExpose({
  isValidatePass,
  formItemParentRef
})

const modelRef = ref(model)
watch(
  () => model,
  (val) => (modelRef.value = val),
  { immediate: true, deep: true }
)
const FormItemShowRef = ref(formItemShow)
watch(
  () => formItemShow,
  (val) => (FormItemShowRef.value = val),
  { immediate: true, deep: true }
)

provide<Ref<BaseModelType>>('model', modelRef)
provide<Ref<BaseModelFormItemShowType | undefined>>('formItemShow', FormItemShowRef)

const isOperationsPreCollapse = ref(false)
const isOperationsSufCollapse = ref(false)
</script>

<template>
  <div class="box-border w-full h-full flex flex-col items-stretch">
    <el-scrollbar class="flex-1 h-0 min-h-0">
      <x-form-cols-responsive
        ref="formRef"
        :label-width="labelWidth"
        :label-on-top-width="labelOnTopWidth"
        :rules="rules"
        show-message
        :model="modelRef"
      >
        <slot name="form-pre" />
        <!-- 配置类型 -->
        <!-- 只有当新增配置时才能选择配置的类型 -->
        <form-item
          v-if="!modelRef?._id"
          label="配置类型"
          prop="type"
          ipt-type="ElSegmented"
          :ipt-props="{ options: confTypeOptions }"
        />
        <!-- 父级目录 -->
        <form-item-parent
          ref="formItemParentRef"
          :current-is-dir-form="currentIsDirForm"
          :get-dir-tree="getDirTree"
        />
        <!-- 名称 -->
        <form-item
          label="名称"
          prop="name"
          :ipt-props="{ placeholder: '配置名称', clearable: true }"
        />
        <!-- 优先级 -->
        <form-item
          label="优先级"
          prop="priority"
          ipt-type="ElInputNumber"
          :ipt-props="{ min: 0, placeholder: '值越大优先级越高' }"
        />
        <slot name="default" />
        <!-- 图标选择 -->
        <form-item
          label="图标"
          prop="icon"
          ipt-type="XIconSelector"
          :ipt-props="{
            onlineSearch: 'XIconSetOnlineSearchIconify',
            iconSets: [
              { type: 'XIconSetIconify', icons: TablerIcons, name: 'tabler' },
              { type: 'XIconSetIconify', icons: SimpleIcons, name: 'simple-icons' },
              { type: 'XIconSetIconify', icons: LogosIcons, name: 'logos' }
            ]
          }"
        />
        <!-- 图标颜色选择 -->
        <form-item label="图标颜色" prop="color" ipt-type="ElColorPicker" />
        <!-- 备注 -->
        <form-item
          label="备注"
          prop="remark"
          :ipt-props="{
            placeholder: '备注信息...',
            type: 'textarea',
            autosize: { minRows: 2, maxRows: 5 },
            clearable: true
          }"
        />
        <slot name="form-suf" />
      </x-form-cols-responsive>
    </el-scrollbar>
    <div>
      <el-divider />
      <div class="pt-2 flex justify-between items-center">
        <s-contact
          strategy="Next"
          :contact="[() => (isOperationsPreCollapse = true)]"
          :restore="[() => (isOperationsPreCollapse = false)]"
        >
          <slot name="operations-pre" :collapse="isOperationsPreCollapse" />
        </s-contact>
        <s-contact
          class="pl-2"
          :contact="[() => (isOperationsSufCollapse = true)]"
          :restore="[() => (isOperationsSufCollapse = false)]"
        >
          <slot name="operations-suf" :collapse="isOperationsSufCollapse" />
        </s-contact>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
